import { h, createApp } from 'vue'
import CharacterDialog from '@/components/character-dialog'
import CharacterDrawer from '@/components/character-drawer'
import GSelectDialog from '@/components/g-select-dialog.vue'
import DeptSelectorH5 from '@/components/DeptSelectorH5.vue'
import UserSelectorH5 from '@/components/UserSelectorH5.vue'
import DeptSelector from '@/components/DeptSelector.vue'
import RoleSelector from '@/components/RoleSelector.vue'
import UserSelector from '@/components/UserSelector.vue'  
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const componentMap = {
  'CharacterDialog': CharacterDialog,
  'CharacterDrawer': CharacterDrawer,
  'DeptSelectorH5': DeptSelectorH5,
  'UserSelectorH5': UserSelectorH5,
  'DeptSelector': DeptSelector,
  'RoleSelector': RoleSelector,
  'UserSelector': UserSelector,
  'GSelectDialog': GSelectDialog,
  'test': GSelectDialog,
}

let container = null
let appInstance = null
let isProcessing = false // 防重复处理标志

const defProps = {
    onConfirm: () => {},
    onCancel: () => {},
}

export function gShowDialog(options = {}) {
  // 防止重复调用
  if (isProcessing) {
    //console.warn('gShowDialog is already processing');
    return;
  }
  
  isProcessing = true;
  
  try {
    // 清理之前的实例
    if (appInstance) {
      appInstance.unmount();
      appInstance = null;
    }
    
    // 清理之前的容器
    const existingContainer = document.getElementById('g-dialog-container')
    if (existingContainer) {
      document.body.removeChild(existingContainer)
    }
    
    // 创建新的容器
    container = document.createElement('div')
    container.id = 'g-dialog-container'
    document.body.appendChild(container)
    
    const props = {...defProps, ...options}
    const DialogComponent = componentMap[props.dialogName] || CharacterDialog
    
    // 添加调试信息
    //console.log('DialogComponent:', DialogComponent)
    //console.log('Props:', props)
    
    appInstance = createApp({
      render() {
        // 确保组件属性正确传递
        const componentProps = {
          ...props,
          onConfirm: (selectedChars) => {
            //console.log('useSelectDialog 中的 onConfirm 被调用')
            //console.log('传递的字符:', selectedChars)
            props.onConfirm(selectedChars)  // 确保参数被传递
            cleanup()
          },
          onCancel: () => {
            props.onCancel()
            cleanup()
          },
        }
        
        // 添加调试信息
        //console.log('Rendering component with props:', componentProps)
        return h(DialogComponent, componentProps)
      },
    })

    appInstance.use(ElementPlus).mount(container)
    
  } catch (error) {
    console.error('Error in gShowDialog:', error)
    isProcessing = false
  }

  return appInstance
}

function cleanup() {
  try {
    if (appInstance) {
      appInstance.unmount()
      appInstance = null
    }
    
    if (container) {
      document.body.removeChild(container)
      container = null
    }
  } catch (error) {
    console.warn('Error during cleanup:', error)
  } finally {
    isProcessing = false
  }
}

// 挂载到 window
if (typeof window !== 'undefined') {
  window.GDialog = window.GDialog || {}
  window.GDialog.openDialog = window.GDialog.showDialog = gShowDialog
  window.GDialog.dialogList = Object.keys(componentMap)
}